<script>
export default {
  props: {
    name: {
      type: String,
    },
    sex: {
      type: Number,
    },
    studentNumber: {
      type: String,
    },
    startTime: {
      type: String,
    },
    endTime: {
      type: String,
    }
  },
  computed: {
    profile() {
      if (this.name.length <= 2) {
        return this.name
      } else {
        return this.name.substr(this.name.length - 2, 2)
      }
    },
    sexDisplay() {
      if (this.sex === 0) {
        return '男生'
      } else {
        return '女生'
      }
    },
    studentNumberDisplay() {
      if (this.studentNumber.length > 0) {
        return this.sexDisplay + this.studentNumber
      } else {
        return this.sexDisplay + '00000000'
      }
    },
  }
}
</script>

<template>
  <div class="pi-container">
    <div class="profile">{{ profile }}</div>
    <div class="personal-info">
      <div class="font-dark">{{name.length > 0 ? name : '姓名'}}</div>
      <div class="font-normal">{{studentNumberDisplay}}</div>
    </div>
  </div>
  <div class="other-info-container">
    <div class="col-1">
      <div class="row-1">
        <div class="font-light">请假类型：</div>
        <div class="font-normal">①离沈申请(报批)</div>
      </div>
      <div class="row-2">
        <div class="font-light">需要离校：</div>
        <div class="font-normal">离校</div>
      </div>
    </div>
    <div class="col-2">
      <div class="font-light">销假规则：</div>
      <div class="font-warning">离校请假需要销假，非离校请假无需销假</div>
      <div class="font-primay" style="margin-left: 1.33333vw;">查看 ></div>
    </div>
    <div class="col-3">
      <div class="font-light">实际休假时间：</div>
      <div class="font-normal" style="font-weight: 500;">{{`${startTime} ~ ${endTime}`}}</div>
    </div>
  </div>
</template>

<style scoped>
.pi-container {
  display: flex;
  align-items: center;
  padding: 2.66667vw 5.33333vw;
  background-color: #fff;
}
.profile {
  width: 12.8vw;
  height: 12.8vw;
  color: #fff;
  line-height: 12.8vw;
  font-size: 3.73333vw;
  text-align: center;
  border-radius: 50%;
  background: #39f;
  margin-right: 2.66667vw;
}
.personal-info {
  font-size: 3.73333vw;
}
.other-info-container {
  font-size: 3.2vw;
  padding: 2.66667vw 5.33333vw;
  background-color: #fff;
}
.col-1 {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 1.33333vw;
}
.col-2 {
  display: flex;
  margin-bottom: 1.33333vw;
}
.col-3 {
  display: flex;
}
.row-1,.row-2 {
  display: flex;
  width: 50%;
}
</style>